<template>
  <!-- 卡片 -->
  <div class="card" @click="goto">
    <!-- 卡片大图 -->
    <img src="/baking1/Fge9lvM93fLrIJCBduFWDkbhbGJI.png" />
    <!-- 卡片标题 -->
    <span>黑米馒头,原味贝果,抹茶吐原味贝果原味贝果,抹茶吐</span>
    <!-- 卡片底部 -->
    <div class="bottom">
      <!-- 作者头像名称 -->
      <van-image
        round
        width="1.25rem"
        height="1.25rem"
        fit="cover"
        src="/baking1/Fge9lvM93fLrIJCBduFWDkbhbGJI.png"
      />
      <span>清风拂过</span>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    goto() {
      this.$router.push(`/works/${1}`);
    },
  },
};
</script>

<style lang="scss" scoped>
.card {
  width: 160px;
  margin: 10px 0;
  display: block;
  border-radius: 5px;
  background-color: #fff;
}
.card {
  > img {
    width: 100%;
    display: block;
    border-radius: 5px;
  }
}
.card {
  > span {
    display: block;
    height: 42px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    word-wrap: break-word;
    word-break: break-all;
    overflow: hidden;
  }
}
.card .bottom {
  display: flex;
  padding: 5px;
  align-items: center;
  overflow: hidden;
}
</style>
